<template>
  <div class="detail">
    <Header class="header">
      <template v-slot:news-detail>
        <div class="header-title">| 新闻频道</div>
      </template>
    </Header>
    <div class="news-detail">
      <div v-for="item in detailList" :key="item.docid">
        <h3 class="title">{{ item.title }}</h3>
        <div class="detail-info">
          <div class="time-wrap">
            <span class="time">{{ item.create_time }}</span>
            <span>{{ item.city }}</span>
          </div>
          <div class="gentie" @click="goCommend">
            <van-icon name="chat-o" size="20px" />
            <span>1人跟帖</span>
          </div>
        </div>
        <div class="news-source">
          <span>{{ item.source }}</span>
        </div>
        <div class="news-content">
          <div class="page">
            <p>
              {{ item.text_p }}
            </p>
            <p>
              {{ item.text_p }}
            </p>
          </div>
        </div>
        <div class="news-imgUrl">
          <van-image
            width="350"
            height="200"
            :src="item.imgUrl"
            style="text-align: center"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/home/Header.vue";
import { getDetail } from "@/api/detail";
export default {
  name: "ProductDetail",
  components: { Header },
  created() {
    // 拿列表传的id
    this.id = this.$route.query.id;
    this.getData();
  },
  data() {
    return {
      id: "",
      detailList: [],
    };
  },
  methods: {
    goCommend() {
      this.$router.push({
        path: "/commend-detail",
      });
    },
    async getData() {
      let res = await getDetail();
      this.detailList = res.data.news;
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  padding-right: 10px;
  .header-search {
    display: flex;
    height: 35px;
    line-height: 35px;
    width: 66%;
    background-color: rgba(0, 0, 0, 0.1);
    font-size: 14px;
    border-radius: 15px;
    padding-left: 10px;
    .search-info {
      color: #fff;
    }
    .van-icon {
      color: #fff;
      top: 10px;
      margin-right: 10px;
    }
  }

  .header-title {
    font-size: 15px;
    color: #fff;
    margin-right: 6px;
  }
}
.news-detail {
  font-weight: 400;
  padding: 20px 10px 0;
  .title {
    margin: 15px 20px;
    text-align: center;
  }
  .detail-info {
    line-height: 20px;
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    font-weight: 400;
    margin: 0 -25px 12px;
    color: #888;
    .time-wrap {
      margin-left: 12px;
      .time {
        margin-right: 20px;
      }
    }
  }
  .gentie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: #fff;
    line-height: 26px;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 10px;
    span {
      margin-left: 5px;
    }
  }
  .news-source {
    font-size: 12px;
    color: #888;
    margin-left: 25px;
    margin-top: -10px;
  }
  .news-content {
    font-size: 18px;
    line-height: 25px;
    padding: 0 20px;
    word-wrap: break-word;
    color: #404040;
    margin: 20px auto;
    .page {
      text-indent: 40px;
      line-height: 36px;
    }
  }
}
</style>
